/*
 * @Description: 行程列表
 * @Author: jian.chen
 * @Date: 2019-04-01 18:48:40
 * @Last Modified by: jian.chen
 * @Last Modified time: 2019-04-18 14:32:43
 */

<template>
  <!-- 月份分类栏 -->
  <scroll
    ref="scroll"
    :getListData="getListDataByScroll"
    :noDataText="noDataText"
    :useBody="useBody"
    :up="up"
  >
    <!-- <div class=""> -->
    <template v-for="(value,key) in dataList">
      <div
        class="flex-h flex-vc message"
        v-if="isDifferentToLast(value.MONTH,key-1)"
        :key="'message'+key"
      >
        <span class="flex1">{{value.MONTH+'月'}}</span>
      </div>
      <div
        v-for="(price,index) in value.POS_USER_BILLS"
        class="month"
        :key="'mon'+key+'-'+index"
      >
        <div
          class="flex-h list"
          :class="{'xb_border ddd':index!==0||!isDifferentToLast(value.MONTH,key-1)}"
          :key="'div'+key"
        >
          <div
            :class="price.PAY_STATUS===2?'baseBgColorInvalid':'baseBgColorNoActive'"
            class="imgDiv"
          >
            <img
              class="img"
              src="../assets/card_bus.png"
            >
          </div>
          <div class="list_message">
            <span class="text">{{price.TITLE}}</span>
            <ul class="subscript">{{formatData(price.PAY_TIME)}}</ul>
          </div>
          <div class="list_money">
            <span :class="getProcessState(price).className">{{getProcessState(price).status}}</span>
            <ul
              v-if="price.PAY_STATUS===-1"
              class="subscript refund"
            >已退款</ul>
          </div>
        </div>
      </div>
    </template>
    <!-- </div> -->
  </scroll>
</template>

<script>
// import TitleBar from '@/components/titlebar/TitleBar'
import ScrollWithNet from '@/components/scroll/ScrollWithNet'
// import { dateFtt } from 'vue-xiaobu-utils'
import { getFriendlyTime } from '../../../utils/FormatUtils.js'
// import aa from '../../../utils/LoginUtil.js'
export default {
  name: 'ConsumeList',
  components: {
    'scroll': ScrollWithNet
    // 'title-bar': TitleBar
  },
  props: {
    // 传入获取列表数据的方法
    getListByApi: {
      type: Function,
      default: null,
      required: true
    }
  },
  data() {
    return {
      // getTestLogin: aa,
      // pageTitle: '行程记录',
      // noBusStation: false,
      formatData: getFriendlyTime,
      useBody: true,
      up: {
        noMoreSize: 11,
        page: { size: 10 }
      },
      noDataText: '暂无行程',
      dataList: [],
      color: ''
      // t: false
    }
  },
  methods: {
    // 判断是否有数据
    // getNoBusStation(month, lastIndex, index) {
    //   if (lastIndex >= 0 && month === this.dataList[lastIndex].MONTH && index === 0) {
    //     return true
    //   }
    //   return false
    // },
    // gets(index, month, lastIndex) {
    //   // console.log('111111111111', this.dataList)
    //   // console.log(index)

    //   // console.log('========================================')
    //   // console.log(lastIndex)
    //   // let name = ''
    //   if (!this.t) {
    //     // console.log('sssssssssss')
    //     // console.log(index + '----------->', this.t)
    //     this.t = true
    //     // return 'xb_border_bottom ddd'
    //   } else {
    //     // console.log(index + '----------->', this.t)
    //     return 'xb_border ddd'
    //     // name = 'xb_border ddd'
    //   }
    // },
    // // 判断是不是要展示上划线
    // getTopBorder(month, lastIndex, index) {
    //   // console.log(month, lastIndex, index)
    //   if (lastIndex >= 0 && month === this.dataList[lastIndex].MONTH && index === 0) {
    //     return true
    //   }
    //   return false
    // },
    // // 判断是不是要展示下划线
    // getBottomBorder(posUserBills, index, month, lastIndex) {
    //   if (posUserBills.length === index + 1) {
    //     return false
    //   }
    //   return true
    // },
    // 获取行程状态
    getProcessState(payStatus) {
      let status = ''
      let className = ''
      switch (payStatus.PAY_STATUS) {
        case -1:
        case 0:
          status = '- ' + parseFloat(payStatus.PAY_PRICE).toFixed(2)
          className = 'price money'
          break
        case -2:
          status = '支付失败'
          className = 'defeated character'
          break
        case 2:
          status = '已补扣'
          className = 'defeated character'
          break
      }
      return { className: className, status: status }
    },
    // 判断列表的月份是否与上一页不同：不同则展示，相同则隐藏
    isDifferentToLast(month, lastIndex) {
      // console.log(month, lastIndex)
      if (lastIndex >= 0 && month === this.dataList[lastIndex].MONTH) {
        return false
      }
      // this.border = true
      return true
    },
    // 通过滚动上拉获取数据
    getListDataByScroll(pageIndex, pageSize) {
      return this.getListByApi(pageIndex, pageSize).then(body => {
        let list = body.LIST || []
        if (pageIndex === 1) {
          this.dataList = list
        } else {
          this.dataList = this.dataList.concat(list)
        }
        // console.log(list.length)
        // if (list.length) {
        //   this.noBusStation = true
        // } else {
        //   this.noBusStation = false
        // }
        // TODO: 注意这里return的length不可以是list.length
        return { length: pageSize, count: body.COUNT }
        // return { length: 0, count: 0 }
      }).catch(error => {
        console.error(error)
      })
    }
  }
}

</script>

<style>
html {
  background-color: #f2f5f6;
}
/* html,
body {
  height: 100%;
  background-color: #f2f5f6;
} */
.message {
  background-color: #f2f5f6;
  padding: 26px 43px 27px 43px;
  color: #999999;
  font-size: 24px;
  height: 70px;
  box-sizing: border-box;
}
.month {
  background-color: #ffffff;
  padding: 0 30px;
  height: 140px;
}
.list_message,
.list_money {
  margin-top: 34px;
}
.list {
  position: relative;
}
.text {
  font-size: 28px; /*xp*/
  color: #333333;
}
.subscript {
  font-size: 22px; /*xp*/
  color: #999999;
}
.imgDiv {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  margin: 30px 30px 30px 0px;
  background-position: center;
  background-size: 80px 80px;
}
.img {
  width: 80px;
  height: 80px;
  background-position: center;
  background-size: 80px 80px;
}
.error-image {
  width: 481px;
  height: 295px;
  margin-bottom: 58px;
}
.refund {
  text-align: right;
}
.list_money {
  position: absolute;
  right: 0px;
}
.money {
  font-size: 34px; /*xp*/
}
.character {
  font-size: 28px; /*xp*/
}
.normality {
  color: #3795ff;
}
.price {
  color: #333333;
}
.defeated {
  color: #999999;
}
</style>
